import React, { Component } from "react";
import "./HotCity.less";
class HotCity extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  clickHandler(data) {
    console.log(data);
    this.props.changeCity(data);
  }
  render() {
    return (
      <div className="city-list-container">
        <h3>热门城市</h3>
        <ul className="clear-fix">
          <li>
            <span onClick={this.clickHandler.bind(this, "北京")}>北京</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "上海")}>上海</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "杭州")}>杭州</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "广州")}>广州</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "苏州")}>苏州</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "深圳")}>深圳</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "南京")}>南京</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "天津")}>天津</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "重庆")}>重庆</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "厦门")}>厦门</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "武汉")}>武汉</span>
          </li>
          <li>
            <span onClick={this.clickHandler.bind(this, "西安")}>西安</span>
          </li>
        </ul>
      </div>
    );
  }
}

export default HotCity;
